<%--
  Created by IntelliJ IDEA.
  User: 27716
  Date: 2024/10/23
  Time: 15:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加</title>
    <script src="../../static/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="../../static/css/css.css">
</head>
<body>
<%--那些数据树妖添加
    不需要：主键 状态（0） 逻辑删除（要，待开发）
    要：用户名 密码 入职时间
--%>
用户名： <input type="text" id="username"> <br>
密码： <input type="text" id="password"> <br>
入职时间： <input type="datetime-local" step="1" id="time"> <br>
形象照:
<%--形象照：（修改和添加完全一样，唯一区别修改多回显）--%>
<%--页面布局2步，图片展示4步，上传图片4步 共同的操作 回显1步--%>
<%--1.img标签 用于展示图片  支持设置图片大小 给id选择器--%>
<img src="" alt="" width="45" height="55" id="img">
<%--input type类型是文件类型 file 给id选择器 ,绑定改变事件 传参 this 表示选中的图片，--%>
<input type="file" id="file" onchange="showImg(this)">
<br>
<input type="button" value="添加" id="add">
</body>
<script>
    //展示图片的函数 参数 Obj 代表 this
    function showImg(obj) {
        //1.获取选中的文件 2.创建阅读加载器（流）FileReader 3.利用流必须先读取图片的本地路径 4.根据选好的图片读取在img区域展示
        let file = obj.files[0];//获取第一个元素
        let fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload = function () {
            $("#img").attr("src", this.result) //把读取的结果赋值 img区域
        }
    }
    $("#add").click(function () {
        //添加的 图片 数据库 存 服务器的 地址
        let imgUrl = "";
        //1.创建FormData()对象 ，专用于图片上传
        let formData = new FormData();
        //2.获取用户选择的文件
        let file = $("#file")[0].files[0];
        //3.将需要上传的图片 添加达到 对象中 append
        formData.append("file",file);
        //4.图片上传 post 请求 不缓存，不异步，不转二进制，不转类型 表单形式提交
        $.ajax({
            url:"/file/upload",//路径
            type:"post",//图片只能使用post ，post支持流（二进制）传递
            data:formData,//图片上传不允许 使用json  直接传递formData对象
            async:false,//同步
            cache:false,//不缓存
            processData: false,
            contentType:false,
            dataType:"json",//以json 格式 解析 服务器的地址
            success(res){
                console.log(res)
                imgUrl = res;
            },
            error(){
                alert("服务器故障.......")
            }
        })
        //1.取值
        let username = $("#username").val();
        let password = $("#password").val();
        let time = $("#time").val();
        if (!username || !password || !time || !imgUrl) {
            alert("数据不能为空");
            return;
        }
        //2.组装对象
        let obj = {username: username, password: password, time: time,imgUrl:imgUrl};
        //3.发起异步请求
        $.ajax({
            url: "/user/addUser",
            type: "post",
            data: {reqInfos: JSON.stringify(obj)},
            dataType: "json",
            success(res) {
                console.log(res);
                if (res === 200) {
                    alert("添加成功");
                    location.href = "list.jsp";
                }
            },
            error() {
                alert("别添加了，回家种地")
            }
        })
    })

</script>
</html>
